<template>
	<view>
		<view class="replyList">
			<view class="none" v-if="replyList.length == 0">没有评论</view>
			<view class="plAll" v-for="(item,index) in replyList" :key="index">
				<view class="plAllItem">
					<view class="leftAvatar">
						<image v-if="item.avatar" :src="item.avatar"></image>
						<image v-else src="/static/image/logo.png"></image>
					</view>
					<view class="plInfo">
						<view class="plInfo_detail">
							<view class="plName" @tap="huifu(item.video_reply_id,0,item.users_name)">{{item.users_name}}</view>
							<view class="zan" :class="[item.is_like == 1 ? 'zan_active':'']" @tap="giveUp(item.video_reply_id,item.is_like)">
								<i class="iconfont1 iconzan"></i>{{item.likenum}}
							</view>
						</view>
						<view class="plCont" v-html="item.reply_text"></view>
						<view class="cont_info">
							<view class="num">{{item.time}}<text v-if="item.user_id == user_id" @tap="deleteItem(item.video_reply_id,item.video_id,index)">删除</text></view>
							<view class="show" v-if="!item.isShow && item.answer.length > 0" @tap="ShowItem(index)">展开</view>
							<view class="show" v-if="item.isShow" @tap="ShowItem(index)">收起</view>
						</view>
					</view>
				</view>
				<view class="plAll plItem" v-if="item.isShow" v-for="(item1,index1) in item.answer" :key="index1">
					<view class="plAllItem">
						<view class="leftAvatar">
							<image v-if="item1.avatar" :src="item1.avatar"></image>
							<image v-else src="/static/image/logo.png"></image>
						</view>
						<view class="plInfo">
							<view class="plInfo_detail">
								<view class="plName" @tap="huifu(item.video_reply_id,item1.video_reply_id,item1.users_name)">{{item1.users_name}}</view>
								<view class="zan" :class="[item1.is_like == 1 ? 'zan_active':'']" @tap="giveUp(item1.video_reply_id,item1.is_like)">
									<i class="iconfont1 iconzan"></i>{{item1.likenum}}
								</view>
							</view>
							<view class="huifu"> <text v-if="item1.answer_id != 0 && item1.answer_id == v.video_reply_id" v-for="(v,k) in item.answer"
								 :key="k">回复{{v.users_name}}：</text>{{item1.reply_text}}</view>
							<view class="cont_info">
								<view class="num">{{item1.time}}<text v-if="item1.user_id == user_id" @tap="deleteItem(item1.video_reply_id,item1.video_id,index,index1)">删除</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="replyList.length>7" :status="status" :content-text="contentText" />
		</view>
		<view class="bottom">
			<input type="text" v-model="apply_text" :placeholder="placeholder" placeholder-class="input" @focus="inputFocus" @blur="inputBlur" />
			<view class="send" :class="[isFoucs?'':'vague']" @tap="send">发送</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				replyList: [],
				isFoucs: false,
				video_id: '',
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				apply_text: '' ,//评论内容
				pid: 0,
				answer_id: 0,
				answer_name: '',
				placeholder: '参与评论~',
				user_id: ''
			}
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getComment()();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getComment();
			}, 500);
		},
		onLoad(e) {
			this.video_id = e.video_id;
			this.user_id = uni.getStorageSync('userInfo').id;
			this.getComment();
		},
		methods: {
			/* 获取评论列表 */
			getComment() {
				var data = {
					video_id: this.video_id,
					page: this.page,
					pagesize: 8
				}
				this.$zapi.apiPost('user/video.Lists/listsReply', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].crate_time);
							list[i].isShow = false;
							for (var j = 0; j < list[i].answer.length; j++) {
								list[i].answer[j].time = util.getBriefTime(list[i].answer[j].crate_time);
							}
						}
						this.replyList = this.reload ? list : this.replyList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.replyList = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 点赞 & 取消点赞 */
			giveUp(video_reply_id,is_like){
				var data = {
					video_id: this.video_id,
					video_reply_id: video_reply_id
				}
				var url = '';
				if(is_like == 1) {
					url = 'user/video.Lists/delReplyLike';
				} else {
					url = 'user/video.Lists/addReplyLike';
				}
				this.$zapi.apiPost(url,data).then(res=>{
					if(res.data.code == 200) {
						for(var i = 0; i < this.replyList.length; i++) {
							if(video_reply_id == this.replyList[i].video_reply_id) {
								if(is_like == 1) {
									this.replyList[i].is_like = null;
									this.replyList[i].likenum--;
								} else {
									this.replyList[i].is_like = 1;
									this.replyList[i].likenum++;
								}
							}
							var da = this.replyList[i].answer;
							for(var j = 0; j < da.length; j++) {
								if(video_reply_id == da[j].video_reply_id) {
									if(is_like == 1) {
										da[j].is_like = null;
										da[j].likenum--;
									} else {
										da[j].is_like = 1;
										da[j].likenum++;
									}
								}
							}
						}
					}
				})
			},
			/* 评论文章 */
			send() {
				var data = {
					video_id: this.video_id,
					text: this.apply_text,
					pid: this.pid,
					answer_id: this.answer_id
				}
				if(!this.apply_text){
					uni.showToast({
						title: '请填写评论内容',
						icon:'none'
					});
					return;
				}
				this.$zapi.apiPost('user/video.Lists/addReply', data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if(res.data.code == 200) {
						this.page = 1,
						this.reload = true;
						this.getComment();
						this.apply_text = '';
						this.pid = 0;
						this.answer_id = 0;
					}
				})
			},
			/* 回复 */
			huifu(pid,video_reply_id,users_name) {
				this.answer_name = users_name;
				this.pid = pid;
				this.answer_id = video_reply_id;
				this.inputFocus();
			},
			/* 删除评论 */
			deleteItem(video_reply_id,video_id,index,index1) {
				var data  = {
					video_reply_id: video_reply_id,
					video_id: video_id
				}
				this.$zapi.apiPost('user/video.Lists/delReply',data).then(res=>{
					if(res.data.code == 200) {
						if(index1 || index1 == 0) {
							this.replyList[index].answer.splice(index1,1);
						} else {
							this.replyList.splice(index,1);
						}
					}
				})
			},
			/* 展开 & 收起 */
			ShowItem(index) {
				this.replyList[index].isShow = !this.replyList[index].isShow;
			},
			/* 获取焦点 */
			inputFocus() {
				this.isFoucs = true;
				if(this.answer_name) {
					this.placeholder = '回复'+this.answer_name+':';
				}
			},
			/* 失去焦点 */
			inputBlur() {
				this.isFoucs = false;
			}
		}
	}
</script>

<style lang="scss">
	page {}

	/* 评论 */
	.replyList {
		padding-bottom: 100upx;
	}

	.none {
		color: #999999;
		text-align: center;
		margin-top: 200upx;
	}

	.plAll {
		display: flex;
		justify-content: flex-start;
		padding: 30upx 30upx 0;
		border-bottom: 2upx solid #E5E5E5;
	}

	.leftAvatar,
	.leftAvatar image {
		width: 64upx;
		height: 64upx;
		margin-right: 10upx;
		border-radius: 50%;
	}

	.plInfo {
		width: 90%;

		.huifu {
			color: #333333;
			font-size: 30upx;

			& text {
				color: #999999;
				font-size: 30upx;
			}
		}
	}

	.plInfo_detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.plInfo_detail view {
		line-height: 1;
	}

	.plName {
		color: #333333;
		font-size: 30upx;
	}

	.follow {
		color: #00ACFE;
		font-size: 26upx;
	}

	.plCont {
		color: #333333;
		font-size: 26upx;
		margin-top: 20upx;
		overflow: hidden;
		word-break: break-all;
		word-wrap: break-word;
	}

	.cont_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1;
	}

	.num {
		color: #999999;
		font-size: 22upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.num text{
		color: #F25252;
		margin-left: 20upx;
	}

	.show {
		color: #999999;
		font-size: 26upx;
	}

	.zan {
		color: #999999;
		font-size: 22upx;
		display: flex;
		align-items: center;
	}

	.zan i {
		color: #999999;
		font-size: 60upx;
	}

	.zan_active,
	.zan_active i {
		color: #FF4E78;
	}

	/* 回复列表 */
	.replyName {
		color: #333333;
		font-size: 30upx;
	}

	.replyList .plAll {
		border-bottom: 0;
		display: block;
	}

	.plItem {
		padding: 30upx 0 0 80upx;

		.leftAvatar,
		.leftAvatar image {
			width: 48upx;
			height: 48upx;
			margin-right: 10upx;
			border-radius: 50%;
		}
	}

	.plAllItem {
		display: flex;
		justify-content: flex-start;
	}

	.replyList .plName {
		color: #999999;
		font-size: 26upx;
	}

	.pL_cont {
		display: flex;
		justify-content: flex-start;
	}

	.pL_cont text {
		white-space: nowrap;
		color: #999999;
		font-size: 30upx;
	}

	.plAllItem .plCont {
		margin-top: 0;
	}

	/* 底部发送栏 */
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 690upx;
		padding: 0 30upx;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FAFAFA;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16);
	}

	.bottom input {
		width: 80%;
		background: #FFFFFF;
		border-radius: 8upx;
		padding-left: 20upx;
		height: 66upx;
		line-height: 66upx;
	}

	.bottom .input {
		color: #CCCCCC;
		font-size: 30upx;
	}

	.send {
		color: #FFFFFF;
		font-size: 34upx;
		background: #FF9900;
		border-radius: 8upx;
		padding: 16upx 20upx;
		line-height: 1;
	}

	.vague {
		opacity: 0.3;
	}
</style>
